<!--
 * @Author: Bennent_G
 * @Date: 2024-12-25 12:27:32
 * @LastEditTime: 2025-01-17 11:24:27
 * @Description:
-->

<template>
	<div>
		<a-modal v-model:open="locaVisible" v-bind="$attrs" :getContainer="false" width="800px">
			<template #footer>
				<a-button key="back" @click="close">取消</a-button>
				<a-button key="submit" type="primary" :loading="loading" @click="handleSubmit">确定</a-button>
			</template>
			<a-form ref="formRef" :model="form" layout="vertical">
				<div class="form-item-header">字典信息</div>
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="字典CODE" name="nickName" :rules="[{ required: true, message: '请输入昵称!' }]">
							<a-input v-model:value="form.nickName" placeholder="请输入昵称"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="字典名称" name="status">
							<a-input placeholder="请输入">
								<template #suffix>
									<GlobalOutlined />
								</template>
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="字典类型" name="status">
							<a-select placeholder="请选择">
								<a-select-option value="系统级">系统级</a-select-option>
								<a-select-option value="业务级">业务级</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="字典数据结构" name="desc" :rules="[{ required: true, message: '请选择!' }]">
							<a-radio-group v-model:value="form.status" name="radioGroup">
								<a-radio value="tree">树形结构</a-radio>
								<a-radio :value="peer">平级结构</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<a-col :span="16">
						<a-form-item label="字典描述" name="content" :rules="[{ required: true, message: '请输入手机号!' }]">
							<a-textarea v-model:value="form.content" placeholder="请输入" :rows="1"></a-textarea>
						</a-form-item>
					</a-col>
				</a-row>
				<div class="form-item-header">字典项信息</div>
				<!-- 字典项表格 -->
				 <a-button type="primary" size="small" @click="addTableData">新增字典项</a-button>
				<a-table :columns="columns" :data-source="dataSource" bordered :pagination="false">
					<template #bodyCell="{ column, text, record }">
						<template v-if="['name', 'age', 'address'].includes(column.dataIndex)">
							<div>
								<a-input v-if="editableData[record.key]"
									v-model:value="editableData[record.key][column.dataIndex]" style="margin: -5px 0" />
								<template v-else>
									{{ text }}
								</template>
							</div>
						</template>
						<template v-else-if="column.dataIndex === 'operation'">
							<div class="editable-row-operations">
								<span v-if="editableData[record.key]">
									<a-typography-link @click="save(record.key)">保存</a-typography-link>
									<a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
										<a>取消</a>
									</a-popconfirm>
								</span>
								<span v-else>
									<a @click="edit(record.key)">编辑</a>
								</span>
							</div>
						</template>
					</template>
				</a-table>
			</a-form>
		</a-modal>
	</div>
	<contextHolder />
</template>

<script setup lang="ts">
import { computed, defineComponent, ref, reactive, watch } from 'vue';
import { cloneDeep } from 'lodash-es';
import type { AnyObject } from "@/views/global";
import { useCustomNotification } from '@/hooks/common/useCustomNotification';

defineComponent({ name: 'DictionaryFormModal' });
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	id: {
		type: [Number, String],
		default: 0
	}
});
const emits = defineEmits(['update:modelValue']);
const locaVisible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emits('update:modelValue', val);
	}
});

const { contextHolder, openNotifation } = useCustomNotification();

// 表单
const formRef = ref();
const loading = ref<boolean>(false);
const form = reactive<AnyObject>({
	nickName: '',
	mobile: '',
	status: 1,
	desc: '',
	content: '',
	remark: '',
});
const handleSubmit = () => {
	loading.value = true;
	formRef.value.validateFields()
		.then((values: AnyObject) => {
			console.log('Received values of form: ', values);
			// #TODO: 提交表单
			openNotifation({ type: 'success', message: '提交成功' });
			close();
		})
		.catch((error: any) => {
			console.log('error', error);
		});
	loading.value = false;
	reset();
};
const reset = () => {
	formRef.value.resetFields();
};

// 字典项表格
const columns = [
	{
		title: '字典项值',
		dataIndex: 'name',
		width: '25%',
	},
	{
		title: '字典项名称',
		dataIndex: 'age',
		width: '15%',
	},
	{
		title: '字典项描述',
		dataIndex: 'address',
		width: '40%',
	},
	{
		title: '操作',
		dataIndex: 'operation',
	},
];
interface DataItem {
	key: string;
	name: string;
	age: string;
	address: string;
}
const data: DataItem[] = [];

const dataSource = ref(data);
const count = computed(() => dataSource.value.length + 1);
const addTableData = () => {
	const newData = {
		key: `${count.value}`,
		name: `字典项-${count.value}`,
		age: `字典项值-${count.value}`,
		address: `字典项描述-${count.value}`,
	};
	dataSource.value.push(newData);
};

const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (key: string) => {
	editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = (key: string) => {
	Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
	delete editableData[key];
};
const cancel = (key: string) => {
	delete editableData[key];
};

// 获取字典信息
const getDictionaryInfo = () => {
	// #TODO: 获取用户信息
	// #TODO: 获取用户信息成功后同步表单
	console.log('getUserInfo', props.id);
};
watch(
	() => props.id,
	(newValue, oldValue) => {
		if (newValue && newValue !== oldValue) {
			getDictionaryInfo();
		};
	}
);
// 关闭弹框
const close = () => {
	locaVisible.value = false;
	reset();
};

</script>

<style scoped lang="scss">
.form-item-header {
	display: flex;
	height: 24px;
	line-height: 24px;
	padding-left: 16px;
	border-left: 4px solid var(--jjext-color-brand);
	margin-bottom: 16px;
}

.ant-input-number {
	width: 100%;
}
</style>
